"use client";
import { Avatar, Card, List, Select, Typography } from "antd";
import "./index.css";
import React, { useState } from "react";
import Link from "next/link";
import Title from "antd/es/typography/Title";
import TagList from "@/components/TagList";
import MdViewer from "@/components/MdViewer";
import useAddUserSignInRecord from "@/hooks/useAddUserSignInRecord";
import { themeList } from "bytemd-plugin-theme";

interface Props {
  question?: API.QuestionVO;
}

/**
 * 题库列表组件
 * @param props
 * @constructor
 */
const QuestionCard = (props: Props) => {
  const { question } = props;
  const [themeValue, setThemeValue] = useState<string>("z-blue");
  const handleChange = (value: string) => {
    setThemeValue(value); // 更新状态
  };
  //   签到
    useAddUserSignInRecord();
    return (
      <div className="question-card">
        <Card>
          <Title level={1} style={{ fontStyle: 24 }}>
            {question.title}
          </Title>
          <TagList tagList={question?.tagList}></TagList>
          <div style={{ marginTop: 16 }}></div>
          <MdViewer value={question?.content} theme={themeValue}></MdViewer>
        </Card>
        <div style={{ marginTop: 16 }}></div>
        主题
        <div style={{ marginTop: 16 }}></div>
        <Select
          defaultValue={themeValue}
          style={{ width: 205 }}
          onChange={handleChange}
          options={themeList.map((item) => {
            return {
              key: item.theme,
              label: item.title,
              value: item.theme,
            };
          })}
        />
        <div style={{ marginTop: 16 }}></div>
        <Card title={"推荐答案"}>
          <MdViewer value={question?.answer} />
        </Card>
      </div>
    );
};

export default QuestionCard;
